import React, { useState } from 'react'
import { Button, Carousel, Input, Select, Space } from 'antd';
// icon 左右
import { RightOutlined, LeftOutlined } from '@ant-design/icons';
// 二维码
import { QRCode } from 'antd';


const contentStyle: React.CSSProperties = {
    margin: 0,
    height: '260px',
    color: '#fff',
    lineHeight: '260px',
    textAlign: 'center',
    background: '#364d79',
};

const onChange = (currentSlide: number) => {
    console.log(currentSlide);
};


// 搜索框
const { Search } = Input;

const options = [
    {
        value: '全部',
        label: '全部',
    },
    {
        value: 'H5',
        label: 'H5',
    },
    {
        value: '海报',
        label: '海报',
    },
    {
        value: '长页',
        label: '长页',
    },

];

// 竖向轮播
const item = [
    '物业工作汇报',
    '邀请函',
    '小游戏',
    '招聘',
    '简历',
    '古风',
    '答题',
];


function Selected() {
    // 今日推荐图片分页
    let [list, setList] = useState(0)
    let num = 0
    let imgarr = [
        '/src/img/bb1.png',
        '/src/img/bb2.png',
        '/src/img/bb3.png',
        '/src/img/bb4.png',
        '/src/img/bb5.png',
        '/src/img/bb6.png',
        '/src/img/bb7.png',
        '/src/img/bb8.png',
        '/src/img/bb9.png',
        '/src/img/bb10.png',
        '/src/img/bb11.png',
        '/src/img/bb12.png',
        '/src/img/bb13.png',
    ]
    let imgmove = (value: any) => {
        console.log(value);

        if (value.clientX >= 448 && value.clientX < 463) {
            setList(num)
        } else if (value.clientX >= 463 && value.clientX < 478) {
            setList(num + 1)
        } else if (value.clientX >= 478 && value.clientX < 493) {
            setList(num + 2)
        } else if (value.clientX >= 493 && value.clientX < 508) {
            setList(num + 3)
        } else if (value.clientX >= 508 && value.clientX < 524) {
            setList(num + 4)
        } else if (value.clientX >= 524 && value.clientX < 539) {
            setList(num + 5)
        } else if (value.clientX >= 539 && value.clientX < 554) {
            setList(num + 6)
        } else if (value.clientX >= 554 && value.clientX < 570) {
            setList(num + 7)
        } else if (value.clientX >= 570 && value.clientX < 585) {
            setList(num + 8)
        } else if (value.clientX >= 585 && value.clientX < 600) {
            setList(num + 9)
        } else if (value.clientX >= 600 && value.clientX < 615) {
            setList(num + 10)
        } else if (value.clientX >= 615 && value.clientX < 630) {
            setList(num + 11)
        } else {
            setList(num + 12)
        }
    }
    // 左右箭头
    const [carIndex, setcarIndex] = useState("0")
    const [carJin, setcarJin] = useState(false)
    const carjin = () => {
        setcarJin(true)
    }
    const carChu = () => {
        setcarJin(false)
    }
    const pagenext = () => {
        console.log(111);
        setcarIndex('-12rem')
    }
    const pageprev = () => {
        setcarIndex('0px')
    }

    return (
        <div style={{ margin: '-20px', width: '100%', height: 'auto' }}>
            {/* tabs切换部分 */}
            <div style={{ width: '100%', height: '100px', display: 'flex' }}>
                <div>
                    <img src="/src/img/moban.jpg" alt="" style={{ height: '80%', width: '100%', margin: '10px', flex: '3' }} />
                </div>
                <div className='swipers' style={{ height: '80%', width: '100%', margin: '0 10px', flex: '7' }}>
                    <Space.Compact style={{ marginTop: '20px', marginLeft: '100px', height: '40px' }}>
                        <Select defaultValue="全部" options={options} style={{ width: '100px', height: '40px' }} />
                        <Input defaultValue="" style={{ width: '400px', height: '40px' }} />
                        <Button type="primary" style={{ height: '40px' }}>搜索</Button>
                    </Space.Compact>
                    {/* 导航栏竖向轮播 */}
                    <div className='demo-swiper'>
                        <Carousel vertical className="Carousel" autoplay>
                            {item &&
                                item.map((item, index) => {
                                    return (
                                        <div key={index}>
                                            <h4>{item}</h4>
                                        </div>
                                    );
                                })}
                        </Carousel>
                    </div>
                    <div style={{ margin: '.5rem 10rem', flex: '7' }} className='search'>
                        <p>邀请函</p>
                        <p>婚礼邀请函</p>
                        <p>个人简历</p>
                        <p>五一放假通知</p>
                        <p>招聘</p>
                        <p>答题</p>
                        <p>清是</p>
                    </div>
                </div>
            </div>
            {/* 轮播图部分 */}
            <div>
                <Carousel afterChange={onChange} autoplay>
                    <div>
                        <h3 style={contentStyle}>
                            <img style={{ width: '100%', height: '100%' }} src="/src/img/img1.jpg" alt="" />
                        </h3>
                    </div>
                    <div>
                        <h3 style={contentStyle}>
                            <img style={{ width: '100%', height: '100%' }} src="/src/img/img2.jpg" alt="" />
                        </h3>
                    </div>
                    <div>
                        <h3 style={contentStyle}>
                            <img style={{ width: '100%', height: '100%' }} src="/src/img/img3.jpg" alt="" />
                        </h3>
                    </div>
                    <div>
                        <h3 style={contentStyle}>
                            <img style={{ width: '100%', height: '100%' }} src="/src/img/img4.jpg" alt="" />
                        </h3>
                    </div>
                </Carousel>
            </div>
            {/* 邀请函部分 */}
            <div style={{ width: '100%', height: '6rem', background: '#f0f0f0' }} onMouseEnter={carjin} onMouseLeave={carChu}>
                <div className='img' >
                    <div style={{ left: carIndex }}>
                        <img src="/src/img/tab1.jpg" alt="" style={{ margin: '.8rem 1.8rem' }} />
                        <img src="/src/img/tab2.jpg" alt="" style={{ margin: '.8rem 1.8rem' }} />
                        <img src="/src/img/tab3.jpg" alt="" style={{ margin: '.8rem 1.8rem' }} />
                        <img src="/src/img/tab4.jpg" alt="" style={{ margin: '.8rem 1.8rem' }} />
                        <img src="/src/img/tab5.jpg" alt="" style={{ margin: '.8rem 1.8rem' }} />
                        <img src="/src/img/tab6.jpg" alt="" style={{ margin: '.8rem 1.8rem' }} />
                        <img src="/src/img/tab7.jpg" alt="" style={{ margin: '.8rem 1.8rem' }} />
                        <img src="/src/img/tab8.jpg" alt="" style={{ margin: '.8rem 1.8rem' }} />
                    </div>
                    <div>
                        <div className='left' onMouseEnter={carjin} onMouseLeave={carChu} onClick={pageprev}><LeftOutlined /></div>
                        <div className='right' onMouseEnter={carjin} onMouseLeave={carChu} onClick={pagenext}><RightOutlined /></div>
                    </div>
                </div>
            </div>
            {/* 今日推荐 */}
            <div className='today'>
                <div className='today_top'>
                    <h1>今日推荐</h1>
                    <span style={{ color: '#CDA484' }}>开通会员免费用</span>
                    <div>
                        <p>精选推荐</p>
                        <p>热点关注</p>
                        <p>世界读书日</p>
                        <p>中国航天日</p>
                        <p>世界知识产权日</p>
                    </div>
                    <div className='more'>查看更多</div>
                </div>
                <div className='today_bottom'>
                    <div className="today_bottom_left">
                        <div style={{ background: '#f0f0f0', width: '100%', height: '55%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                            <p style={{ margin: '1.5rem', fontSize: '3rem', width: '3rem', textAlign: 'center', height: '3rem', color: '#fff', background: 'blue', borderRadius: '50%', lineHeight: '2.3rem' }}>+</p>
                            <p style={{ margin: '1.5rem', fontSize: '1.2rem' }}>空白创建</p>
                        </div>
                        <div style={{ width: '100%', height: '30%' }}>
                            <img src="/src/img/jin.jpg" alt="" style={{ width: '100%', height: '100%' }} />
                        </div>
                    </div>

                    <div className="today_bottom_right">
                        <div style={{ display: 'flex' }}>
                            <dl style={{ width: '9.5rem', height: '100%' }}>
                                <dt style={{ width: '100%', height: '85%' }}>
                                    <img src={imgarr[list]} onMouseMove={imgmove} alt="" style={{ width: '100%', height: '100%' }} />
                                </dt>
                                <dd style={{ width: '100%', height: '15%' }}>
                                    <p>蓝色商务会议活动企业招商答谢会邀请函</p>
                                </dd>
                            </dl>
                            <dl style={{ width: '9.5rem', height: '100%' }}>
                                <dt style={{ width: '100%', height: '85%' }}>
                                    <img src="/src/img/b2.png" alt="" style={{ width: '100%', height: '100%' }} />
                                </dt>
                                <dd style={{ width: '100%', height: '15%' }}>
                                    <p>高端红绿鎏金商务会议新品答谢晚宴邀请函</p>
                                </dd>
                            </dl>
                            <dl style={{ width: '9.5rem', height: '100%' }}>
                                <dt style={{ width: '100%', height: '85%' }}>
                                    <img src="/src/img/b3.png" alt="" style={{ width: '100%', height: '100%' }} />
                                </dt>
                                <dd style={{ width: '100%', height: '15%' }}>
                                    <p>高级轻奢商务会议招商论坛答谢会活动邀请函</p>
                                </dd>
                            </dl>
                            <dl style={{ width: '9.5rem', height: '100%' }}>
                                <dt style={{ width: '100%', height: '85%' }}>
                                    <img src="/src/img/b4.png" alt="" style={{ width: '100%', height: '100%' }} />
                                </dt>
                                <dd style={{ width: '100%', height: '15%' }}>
                                    <p>韩式时尚简约婚礼请柬浪漫清新文艺手绘叶子</p>
                                </dd>
                            </dl>
                            <dl style={{ width: '9.5rem', height: '100%' }}>
                                <dt style={{ width: '100%', height: '85%' }}>
                                    <img src="/src/img/b5.png" alt="" style={{ width: '100%', height: '100%' }} />
                                </dt>
                                <dd style={{ width: '100%', height: '15%' }}>
                                    <p>蓝色商务会议活动企业招商答谢会邀请函</p>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
            {/* vip五折背景图 */}
            <div style={{ width: '100%', height: '8rem', background: 'red', marginTop: '1rem' }}>
                <img src="/src/img/bg.jpg" alt="" style={{ width: '100%', height: '100%' }} />
            </div>
            {/* 图片滚动 */}
            <div className='labour'>
                <div className='labour_top'>
                    <h1>争做劳动先锋·为自己点赞</h1>
                    <div>
                        <p>放假通知</p>
                        <p>节日促销</p>
                        <p>廉洁过节</p>
                        <p>节日祝福</p>
                        <p>劳模评选</p>
                    </div>
                    <div className='more'>查看更多</div>
                </div>
                <div className='labour_bottom'>
                    <div style={{ display: 'flex' }}>
                        <dl style={{ width: '9.5rem', height: '100%' }}>
                            <dt style={{ width: '100%', height: '80%', overflow: 'hidden' }}>
                                <img src="/src/img/gun1.jpg" alt="" style={{ width: '100%', height: 'auto' }} />
                            </dt>
                            <dd style={{ width: '100%', height: '15%' }}>
                                <p>简约企业五一劳动节放假通知节日祝福问候</p>
                            </dd>
                        </dl>

                        <dl style={{ width: '9.5rem', height: '100%' }}>
                            <dt style={{ width: '100%', height: '80%', overflow: 'hidden' }}>
                                <img src="/src/img/gun2.jpg" alt="" style={{ width: '100%', height: 'auto' }} />
                            </dt>
                            <dd style={{ width: '100%', height: '15%' }}>
                                <p>3D风五一劳动节51放假通知公告温馨提示</p>
                            </dd>
                        </dl>

                        <dl style={{ width: '9.5rem', height: '100%' }}>
                            <dt style={{ width: '100%', height: '80%', overflow: 'hidden' }}>
                                <img src="/src/img/gun3.jpg" alt="" style={{ width: '100%', height: 'auto' }} />
                            </dt>
                            <dd style={{ width: '100%', height: '15%' }}>
                                <p>创意五一劳动节放假通知节日祝福问候</p>
                            </dd>
                        </dl>

                        <dl style={{ width: '9.5rem', height: '100%' }}>
                            <dt style={{ width: '100%', height: '80%', overflow: 'hidden' }}>
                                <img src="/src/img/gun4.jpg" alt="" style={{ width: '100%', height: 'auto' }} />
                            </dt>
                            <dd style={{ width: '100%', height: '15%' }}>
                                <p>高端劳动节放假通知致敬劳动者祝福贺卡</p>
                            </dd>
                        </dl>

                        <dl style={{ width: '9.5rem', height: '100%' }}>
                            <dt style={{ width: '100%', height: '80%', overflow: 'hidden' }}>
                                <img src="/src/img/gun5.jpg" alt="" style={{ width: '100%', height: 'auto' }} />
                            </dt>
                            <dd style={{ width: '100%', height: '15%' }}>
                                <p>可爱卡通五一劳动节放假通知公告祝福贺卡</p>
                            </dd>
                        </dl>

                        <dl style={{ width: '9.5rem', height: '100%' }}>
                            <dt style={{ width: '100%', height: '80%', overflow: 'hidden' }}>
                                <img src="/src/img/gun6.jpg" alt="" style={{ width: '100%', height: 'auto' }} />
                            </dt>
                            <dd style={{ width: '100%', height: '15%' }}>
                                <p>卡通幼儿园51劳动节放假通知假期温馨提示</p>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
            {/* 底部 */}
            <div className='footer'>
                <div className='footer_left'>
                    <img src="/src/img/logo.gif" alt="" style={{ width: '80%', height: '10%', margin: '10%' }} />
                    <p style={{ textAlign: 'center', marginTop: "-.8rem" }}>全球1000强，中国100强网站</p>
                    <div>
                        <ul>
                            <li>
                                <h2>700亿+</h2>
                                <span>作品穿刺术</span>
                            </li>
                            <li>
                                <h2>3亿+</h2>
                                <span>累计作品数</span>
                            </li>
                            <li>
                                <h2>6500万+</h2>
                                <span>累计注册用户</span>
                            </li>
                            <li>
                                <h2>100万+</h2>
                                <span>正版模板素材</span>
                            </li>
                            <li>
                                <h2>3000万+</h2>
                                <span>安全运行天数</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div className='footer_center'>
                    <ul>
                        <span>产品矩阵</span>
                        <li>H5</li>
                        <li>海报</li>
                        <li>长页</li>
                        <li>表单</li>
                        <li>互动</li>
                        <li>视频</li>
                        <li>电子圆册</li>
                    </ul>
                    <ul>
                        <span>创意工具</span>
                        <li>红包</li>
                        <li>打赏</li>
                        <li>短信通知</li>
                        <li>二维码美化</li>
                        <li>智能抠图</li>
                        <li>文字云</li>
                        <li>拼图</li>
                        <li>智能海报</li>
                        <li>一键快闪</li>
                    </ul>
                    <ul>
                        <span>灵感交流</span>
                        <li>用户社区</li>
                        <li>创意课堂</li>
                        <li>客户案例</li>
                        <li>精选推荐</li>
                        <li>热门作品</li>
                        <li>营销日历</li>
                    </ul>
                    <ul>
                        <span>服务帮助</span>
                        <li>审核规则</li>
                        <li>作品审核</li>
                        <li>网站地图</li>
                        <li>热门末班</li>
                        <li>客服中心</li>
                        <li>帮助中心</li>
                        <li>隐私协议</li>
                    </ul>
                    <ul>
                        <span>合作伙伴</span>
                        <li>设计师招募</li>
                        <li>合伙人招募</li>
                        <li>正版素材商</li>
                        <li>内容中台</li>
                        <li>内容安全审核</li>
                    </ul>
                    <ul>
                        <span>公司信息</span>
                        <li>关于我们</li>
                        <li>人才招聘</li>
                        <li>公司动态</li>
                        <li>荣誉奖项</li>
                        <li>商务合作</li>
                    </ul>
                    <ul>
                        <span>社交媒体</span>
                        <li>微信公众号</li>
                        <li>官方微博</li>
                        <li>视频号</li>
                    </ul>
                </div>
                <div className='footer_right'>
                    <h3 style={{ textAlign: 'center' }}>手机APP</h3>
                    <p style={{ textAlign: 'center' }}>扫码注册 3分钟做出好设计</p>
                    <QRCode style={{ marginLeft: '1.5rem', width: '13rem', height: '13rem' }}
                        errorLevel="H"
                        value="https://ant.design/"
                        icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
                    />
                </div>
            </div>
            {/* 页脚 */}
            <div style={{ height: '6rem', width: '100%' }}>
                <p>© 2024 eqxiu.com. All rights reserved 北京中网易企秀科技有限公司</p>
                <p><a href="#">电信与信息服务业务经营许可证：京ICP证160037号</a> | <a href="#">京ICP备15056244号</a> | <a href="#">京公网安备11010802018300</a> </p>
            </div>

        </div>
    )
}

export default Selected
